import { ReactNode, CSSProperties, } from "react";

const RootStyle: CSSProperties = {
    width: "100%",
    position: "revert",
}

const ListStyle: CSSProperties = {
    display: "flex",
    flexWrap: "wrap",
}

interface IProps {
    children?: ReactNode & {
        map?: <U>(callbackfn: (value: any, index: number, array: any[]) => U, thisArg?: any) => U[]
    },
}

const Descriptions = (props: IProps) => {
    const {children} = props;
    return (
        <div style={RootStyle}>
            <div style={ListStyle}>
                {
                    Array.isArray(children) ? (children.map((item, index) => (
                        <div style={{width: "33.33%"}} key={index}>
                            {item}
                        </div>
                    ))) : (
                        children
                    )
                }
            </div>
        </div>
    )
}

export default Descriptions;
